<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        position: relative;
      }
      .article-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 1;
        color: #ccc;
      }
      .article-title {
        display: inline-block;
      }
      .article-ad {
        display: inline-block;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 12px;
        margin: 5px;
        padding: 3px;
      }
      .loading {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        font-size: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>所有的赞：{{totalLike}}</h1>
      <select v-model="selectedValue">
        <option value="默认">默认</option>
        <option v-for="item in themeTypeArr" :value="item">{{item}}</option>
      </select>
      <!-- 循环 -->
      <ul v-for="item in arr">
        <li>
          <h4 class="article-title">{{item.title}}</h4>
          <span class="article-ad" v-if="item.ad">广告</span>
          <div>
            <div class="left">
              <span style="color: red">{{item.themeType}}</span>
              <span style="color: gole">{{item.publishTime}}</span>
            </div>
            <div class="right">
              <span @click="handleLike(item)">赞：{{item.like}}</span>
              <span>评论：{{item.commentsCount}}</span>
            </div>
          </div>
          <p class="article-content">{{item.content}}</p>
        </li>
      </ul>
      <div class="loading" v-show="showLoading">loading...</div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>

    <script>
      /**
          // 1、选择合适的vue版本，正确加载到页面中； vue ^2.6.14
          // 2、实例化vue，并赋值给一个全局变量； new Vue({})
          // 3、分析列表中要显示的字段，字段必须包含：标题、文章主题分类（前端、后端、云原生 . . .）、文章技术类型（Vue.js、Spring Boot、Node.js . . .）、
          // 是否是广告、发布时间、点赞次数、评论次数；

          // 4、定义vue响应式数据； 响应式数据定义在哪儿？---》 data中定义数据
          // 5、页面布局需要完全还原；
          // 6、使用vue渲染出列表；循环指令
          // 7、使用合理的vue指令，是否显示“广告”标签  显示隐藏指令 v-show / v-if
          // 8、如果是“广告”项，列表项显示和其他不同。
          // 9、实现顶部【全部】下拉菜单，菜单值是“文章主题分类”字段的所有值；
          // 10、根据下拉菜单，过滤显示对应文章主题分类下的文章；
          // 11、实现热度排名，点赞次数最多，代表热度最高。 排序
          12、实现最新排名，发布时间最近，代表最新；排序
          13、正确使用ES6新语法，尤其是数组的操作；
          14、正确定义事件监听； v-on  @
          15、通过实例化的vue全局变量，操作响应式数据；
          16、包含完整效果录屏，列表渲染必须使用vue实现。
        */
      const data = Mock.mock({
        'list|10': [
          {
            id: '@id',
            title: '@ctitle',
            'themeType|+1': [
              '前端',
              '后端',
              '云原生',
              'ios',
              '安卓',
              'ui-app',
              '小程序',
            ],
            'contentType|+1': ['Vue.js', 'Spring Boot', 'Node.js'],
            img: '@image(100x100, @color)',
            ad: '@boolean()',
            publishTime: '@datetime()',
            like: 0,
            commentsCount: 0,
            content: '@cparagraph(10)',
          },
        ],
      })

      function createData() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(data.list)
          }, 3000)
        })
      }
      /*
        watch（监听属性）   监听异步数据的获取
        computed（计算属性）可以将复杂的计算逻辑，书写在这个地方，具有缓存效果，提升项目访问速度
      */

      const app = new Vue({
        el: '#app',
        data: {
          list: [], // 如果数据是动态的，如何使用呢？
          selectedValue: '默认',
          themeTypeArr: [], // 文章类型数组
          arr: [],
          showLoading: false, // 是否显示loading
        },
        // v-model(change value绑定) watch 监听异步的
        // watch 可以监听v-model值的变化。
        watch: {
          // 监听就是调用
          // ajax/定时器/事件 watch可以处理监听异步结果
          // 异步有什么特点？1. 结果不确定 如何获取到最终的结果
          // 定时器异步
          list(newValue, oldValue) {
            // newValue 异步获取到的最终结果
            console.log('watch', newValue)
          },
          // onChange 事件异步 ->
          selectedValue(newValue, oldValue) {
            console.log('newValue', newValue)
            this.onChange(newValue)
          },
        },
        // computed计算属性：存放一些复杂逻辑，有缓存，效率高
        computed: {
          // 计算所有的赞有多少个
          totalLike() {
            return this.list.reduce((count, item) => {
              return count + item.like
            }, 0)
          },
        },

        // created生命周期一般用来初始化数据的时候使用
        created() {
          console.log('created:', this.$el) // 数据初始化阶段，dom尚未挂在
          this.getData()
        },
        mounted() {
          console.log('mounted:', this.$el) // dom挂载结束
        },
        methods: {
          // async/await 可以让异步代码以同步方式输出
          // 1. async 返回一个promise函数
          // 2. await 必须跟async 搭配使用
          // 3. await 后面跟一个promise函数
          async getData() {
            this.showLoading = true
            const response = await createData()
            this.showLoading = false
            this.list = response
            // 生命周期处理数据
            this.list.forEach((item) => {
              this.themeTypeArr.indexOf(item.themeType) === -1 &&
                this.themeTypeArr.push(item.themeType)
            })
            // 初始化数据
            this.arr = this.list.sort((a, b) => {
              if (new Date(a.publishTime) * 1 > new Date(b.publishTime) * 1) {
                return -1
              } else {
                return 1
              }
            })
          },
          handleLike(item) {
            item.like++
          },

          onChange(value) {
            // console.log('value:', value)
            // console.log(e.target.value, 'e')
            // console.log(this.selectedValue, 'selectedValue')
            if (value === '默认') {
              this.arr = this.list
            } else {
              this.arr = this.list.filter(
                (v) => v.themeType === this.selectedValue
              )
            }
          },
        },
      })
    </script>
  </body>
</html>
